import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:myflutterproject/utils/overScrollBehavior.dart';

/*
* 在水平方向控件中，例如Row
MainAxisAlignment是水平的，默认起始位置在左边，排列方向为从左至右，此时可以通过textDirection来改变MainAxisAlignment的起始位置和排列方向
CrossAxisAlignment是垂直的，默认起始位置在中间，排列方向为从上至下，此时可以通过verticalDirection来改变CrossAxisAlignment的起始位置及排列方向

*在垂直方向的控件中，例如Column
MainAxisAlignment是垂直的，默认起始位置在上边，排列方向为从上至下，此时可以通过verticalDirection来改变MainAxisAlignment的起始位置及排列方向
CrossAxisAlignment是水平的，默认起始位置在中间，此时可以通过textDirection来改变CrossAxisAlignment的起始位置
* */
class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('包装控件Row'),
        centerTitle: true,
      ),
      // 水平线性布局，类似于Android中的LinearLayout控件
      // textDirection：表示水平方向子组件的布局顺序(是左对齐还是右对齐)
      //                TextDirection.ltr 或者 TextDirection.rtl
      // mainAxisSize：表示主轴方向占用的空间，默认是MainAxisSize.max(相当于match_parent)
      //               MainAxisSize.min(相当于wrap_parent)
      // mainAxisAlignment：表示子组件在主轴所占用的空间内对齐方式，
      //                    如果mainAxisSize值为MainAxisSize.min，则此属性无意义，
      //                    textDirection是mainAxisAlignment的参考系
      // crossAxisAlignment：表示子组件在纵轴方向的对齐方式，纵轴的长度则取决于他们最大子元素的长度
      //                     crossAxisAlignment的参考系是verticalDirection，即verticalDirection值
      // verticalDirection：表示垂直的布局方向，VerticalDirection.down从上到下，
      //
      body: Center(
        child: ScrollConfiguration(
          behavior: OverScrollBehavior(),
          child: ListView(
            children: <Widget>[
              Text('水平对齐方式：' + '\r\n' + '1、水平间距对齐'),
              Row1(),
              Text('2、水平均匀对齐'),
              Row2(),
              Text('3、水平间距为两边2倍对齐'),
              Row3(),
              Text('横轴对齐方式：' + '\r\n' + '1、横轴居中对齐(默认)'),
              Row4(),
              Text('2、横轴居顶对齐'),
              Row5(),
              Text('3、横轴居底对齐'),
              Row6(),
              Text('示例：'),
              Rowdemo(),
            ],
          ),
        ),
      ),
    );
  }
}

//水平对齐方式
class Row1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //水平对齐方式
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      //横轴对齐
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }
}

//水平均匀对齐
class Row2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //水平对齐方式
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      //横轴对齐
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }
}

//水平间距为两边2倍对齐
class Row3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //水平对齐方式
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      //横轴对齐
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }
}

//横轴居中对齐(默认)
class Row4 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //水平对齐方式
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      //横轴对齐
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 100,
          height: 80,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }
}

//横轴居顶对齐
class Row5 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //水平对齐方式
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      //横轴对齐
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 100,
          height: 80,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }
}

//横轴居顶对齐
class Row6 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //水平对齐方式
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      //横轴对齐
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        Container(
          width: 100,
          height: 60,
          color: Colors.pink,
          child: Text('aaa'),
        ),
        Container(
          width: 100,
          height: 80,
          color: Colors.yellow,
          child: Text('bbb'),
        ),
        Container(
          width: 100,
          height: 60,
          color: Colors.blue,
          child: Text('ccc'),
        ),
      ],
    );
  }
}

class Rowdemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      //match_parent
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      textDirection: TextDirection.ltr,
      verticalDirection: VerticalDirection.down,
      children: <Widget>[
        Icon(
          Icons.star,
          size: 20,
          color: Colors.green[500],
        ),
        Icon(
          Icons.star,
          size: 30,
          color: Colors.green[500],
        ),
        Icon(
          Icons.star,
          size: 40,
          color: Colors.green[500],
        ),
        Icon(
          Icons.star,
          size: 50,
          color: Colors.green[500],
        ),
        Icon(
          Icons.star,
          size: 60,
          color: Colors.grey[500],
        ),
      ],
    );
  }
}
